/* eslint-disable react-hooks/rules-of-hooks */
import React, { useEffect, useState } from "react";

import { Card, Col, Row,Select,Input } from 'antd';

import "../../../styles/HuYueYue/jindu.scss";

import { jixiao_jindu } from "../../../api/HuYueYue/jixiao";
import { useNavigate } from "react-router-dom";

interface props{

}

const { Search } = Input;

function jindu(props:props) {

let [list,setlist]=useState([])

  useEffect(()=>{
    jixiao_jindu().then((res)=>{
        console.log(res.data);
        setlist(res.data);
    })
  },[])

  const onSearch = (value: string) => console.log(value);

  //   跳转
  let navigate = useNavigate();
  //  查看详情

  const gojindu=(v:string)=>{
        console.log(v);
        navigate("/index/jixiao/jindudetail",{replace: false, state: v}); 
  }

  return (
    <div className="jindu_box">
      <div className="center">
        <h2>考核进度</h2>
        <div className="word">
            <div>周期类型</div>
            <Select
                defaultValue="全部"
                style={{ width: 120 }}
                options={[
                    { value: '全部', label: '全部' },
                    { value: '月度', label: '月度' },
                    { value: '季度', label: '季度' },
                    { value: '半年度', label: '半年度' },
                    { value: '年度', label: '年度' },
                    { value: '其他', label: '其他' },
                ]}
            />
            <Search placeholder="请输入关键字" onSearch={onSearch} style={{ width: 300 }} />
        </div>
      </div>
      
        <Row gutter={24}>
            <Col span={24}>
                <Card bordered={false}>
                    {
                        list.map((v:any,i:any)=>{
                            return(
                                <ul key={i}>
                                    <li className="left">
                                        <h3>{v.name}<span className="yue">{v.type}</span></h3>
                                        <p>考核范围：{v.range}</p>
                                        <p>考核周期：{v.week}</p>
                                    </li>
                                    <li className="center">
                                        <h4>考核进度</h4>
                                        <div>
                                            考核总人数
                                            <span>40</span>
                                            评分中
                                            <span>100</span>
                                            已完成
                                            <span>20</span>
                                            已确定
                                            <span>80</span>
                                        </div>
                                    </li>
                                    <li className="right">
                                        <div onClick={()=>{gojindu(v)}}>查看详情</div>
                                        <div>设置</div>
                                        <div>终止考核</div>
                                    </li>
                                </ul>
                            )
                        })
                    }
                </Card>
            </Col>
        </Row>
    </div>
  );
}

export default jindu;
